<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button>1</button>
    <button>2</button>
    <button>3</button>
    <button>4</button>
    <p></p>
    <script>
        // let声明的变量只在其所在的代码块内有效
        // let和var的具体区别
        // var：
        // 1. 可以重复声明
        // 2. 作用域： 全局作用域 函数作用域（ 局部作用域）
        // 3. var 声明的变量只能是全局的或者是整个函数块的
        // 4. 有预解析（ 变量提升）

        // let  ： 
        // 1. 不允许重复声明
        // 2. 作用域：全局作用域 块级作用域
        // 3. let 则允许声明一个作用域被限制在块级中的变量、语句或者表达式。
        // 4. 没有预解析（变量提升）严格遵循先声明后使用

        // {
        //     let a = 1;
        // }
        // console.log(a);//报错

        // function test() {
        //     let a = 1;
        // }
        // test();
        // console.log(a);//报错

        // if (true) {
        //     let a = 1;
        // }
        // console.log(a);//报错

        // for (let i = 0; i < 3; i++) {
        //     let i = 'qwe';
        //     console.log(i);
        // }

        // var a = 1;
        // let a = 2;
        // console.log(a);//报错

        // const a = 1;
        // console.log(a);

        // 使用const声明常量时要进行初始化，不然会报错

        // const声明与let一样，都是块级作用域。
        // 这意味着常量在声明它们的语句块之外是无法被访问的，并且声明也不会提升
        // 常量：一经初始化，不能赋其他的值
        // 同一作用域内不能用const或let声明已经声明的变量
        // const a = 1;
        // const b = 2;
        // console.log(a);

        // 做一个选项卡
        let btn = document.getElementsByTagName('button'),
            p = document.getElementsByTagName('p')[0];
        for (let i = 0; i < btn.length; i++) {
            btn[i].onclick = function() {
                p.innerHTML = '你点击了选手' + (i + 1);
            }
        }
    </script>
</body>

</html>